<template>
    <div class="addLabel">
        <div class="index-head">
            <div class="left">
                <div class="title">
                    <i class="icon fl"></i>
                    <ul class="fr">
                        <li class="bold">新增电子标签</li>
                        <li>深圳辰尔科技有限公司</li>
                    </ul>
                </div>
            </div>
            <ul class="right fr">
                <li class="fl">
                    <pCircle :all="labelPro.all" :show="labelPro.show" :color="labelPro.color"></pCircle>
                    <p class="title tc">电子标签总量</p>
                </li>
                <li class="fl">
                    <pCircle :all="bandLabelPro.all" :show="bandLabelPro.show" :color="bandLabelPro.color"></pCircle>
                    <p class="title tc">已绑定数量</p>
                </li>
                <li class="fl">
                    <pCircle :all="unBandLabelPro.all" :show="unBandLabelPro.show"
                             :color="unBandLabelPro.color"></pCircle>
                    <p class="title tc">未绑定数量</p>
                </li>
            </ul>
        </div>
        <div class="index-body add-device">
            <div class="content" v-if="!addSuccess">
                <textarea name="labelId" placeholder="请批量录入电子标签" class="label-input" v-model="labelIds"></textarea>
                <div class="place-choose">
                    <ul class="place-info">
                        <li>1.录入电子标签后，将自动绑定剩余的固定资产，此前已绑定的电子标签不受影响；</li>
                        <li>2.剩余的电子标签，将在下次新增资产后，自动绑定到新的固定资产上，此前已绑定的电子标签不受影响；</li>
                        <li>3.请尽快按照最新导出的固定资产表格或电子标签表格将电子标签贴到所对应的固定资产上。</li>
                    </ul>
                    <p class="tc add-btn">
                        <el-button type="primary" @click="addConfirm">新增</el-button>
                    </p>
                </div>
            </div>
            <div class="success tc" v-else>
                <p>
                    <i class="success-icon"></i>
                </p>
                <div class="success-text tc">
                    <p style="font-size: 0.2rem;margin-bottom: 0.6rem">成功新增 {{ addSucNum }} 个电子标签！</p>
                    <p class="to-check">
                        其中{{ bandNum }}个电子标签已自动绑定固定资产，请前往
                        <router-link tag="a" to='/layout/checkLabel'>
                            查看电子标签
                        </router-link>
                        页面进行查看！
                    </p>
                    <p>或 <span class="continue-place" @click="continueAdd">继续新增</span></p>
                </div>
                <ul class="place-info">
                    <li class="tl">1.录入电子标签后，将自动绑定剩余的固定资产，此前已绑定的电子标签不受影响；</li>
                    <li class="tl">2.剩余的电子标签，将在下次新增资产后，自动绑定到新的固定资产上；</li>
                    <li class="tl">3.请尽快按照最新导出的固定资产表格或电子标签表格将电子标签贴到所对应的固定资产上。</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import pCircle from '@/components/progressCircle'

    export default {
        name: "addLabel",
        components: {
            pCircle
        },
        data() {
            return {
                addSuccess: false,
                // 电子标签总量进度条参数
                labelPro: {
                    all: 0,
                    show: 0,
                    color: '#FF3F30'
                },
                // 已绑定数量进度条参数
                bandLabelPro: {
                    all: 0,
                    show: 0,
                    color: '#FF910C'
                },
                // 未绑定数量进度条参数
                unBandLabelPro: {
                    all: 0,
                    show: 0,
                    color: '#3BDDEF'
                },
                labelIds: "",
                addSucNum: 0,
                bandNum: 0
            }
        },
        methods: {
            /**
             * 确认新增
             */
            addConfirm() {
                if (this.labelIds.trim() === "") {
                    this.$message.error(this.$msgDictionary.add.emptyTags)
                    return
                }
                let params = this.labelIds.split(',')
                for (let i = 0; i < params.length; i++) {
                    if (isNaN(params[i] * 1)) {
                        this.$message.error(this.$msgDictionary.add.tags.isNaN)
                        return
                    }
                }
                this.$ajax
                    .labels
                    .addLabels(params)
                    .then((res) => {
                        let result = res.data
                        console.log(result)
                        if (result.code === 200) {
                            this.$message.success(this.$msgDictionary.add.suc)
                            this.addSuccess = true
                            this.addSucNum = result.result
                        } else {
                            this.$message.error(result.msg)
                        }
                    }, () => {
                        this.$message.error(this.$msgDictionary.serviceException)
                    })
            },
            continueAdd() {
                this.addSuccess = false
                this.labelIds = ""
            }
        },
        mounted() {
            let params = {
                userId: "",
            }
            if (localStorage.getItem("user")) {
                params.userId = JSON.parse(localStorage.getItem("user")).userId
            }
            this.$ajax
                .labels
                .getLabels(params)
                .then((res) => {
                    let result = res.data
                    if (result.code === 200) {
                        if (result.result) {
                            this.labelPro.all = result.result.totalTagsNum
                            this.labelPro.show = result.result.totalTagsNum
                            this.bandLabelPro.all = result.result.totalTagsNum
                            this.bandLabelPro.show = result.result.bandTagNum
                            this.unBandLabelPro.all = result.result.totalTagsNum
                            this.unBandLabelPro.show = result.result.notBandTagNum
                        }
                    } else if (result.code === 408) {
                        this.$message.error(this.$msgDictionary.loginTimeout)
                        let timer = setTimeout(() => {
                            clearTimeout(timer)
                            this.$router.push({path: '/login'})
                        }, 1500)
                    } else {
                        this.$message.error(result.msg)
                    }
                }, () => {
                    this.$message.error(this.$msgDictionary.serviceException)
                })
        }
    }
</script>

<style lang="scss" type="text/scss" scoped>
    @import "../../assets/css/add-device";

    .addLabel {
        height: 100%;
        .index-head {
            .left {
                .title {
                    .icon {
                        background-position: -199px -298px;
                    }
                }
            }
        }
        .index-body {
            &.add-device {
                .content {
                    .place-choose {
                        .place-info {
                            li {
                                height: 0.4rem;
                                line-height: 18px;
                            }
                        }
                        .add-btn {
                            padding-top: 0.3rem;
                        }
                    }
                }
            }
        }
    }
</style>
